import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    Image,
    StyleSheet
} from 'react-native';

import {
    Press,
    FastImage
} from './../../../components';

import parseUrl from './../../../utils/parseUrl'
import play_icon from './../../../images/video/play.png';

interface Props {
    data:any,
    onPress:Function
}

class VideoRow  extends PureComponent<Props> {
    static defaultProps = {
        data:{},
        onPress:() => null
    }

    get videoId() {
        const {
            videoId
        } = this.Data;
        return videoId;
    }

    get Data() {
        const {
            data
        } = this.props;
        return data;
    }

    get coverUrl() {
        const {
            coverUrl
        } = this.Data;

        return parseUrl(coverUrl);
    }

    get likeTotal() {
        const {
            likeTotal = 0
        } = this.Data
        return likeTotal;
    }

    get commentTotal() {
        const {
            commentTotal
        } = this.Data
        return commentTotal;
    }

    get viewTotal() {
        const {
            viewTotal = 0
        } = this.Data
        return viewTotal;
    }

    private _onPress = () => {
        const {
            onPress
        } = this.props;
        onPress(this.videoId)
    }

    render() {

        return (
            <View style={styles.container}>
                <Press
                    onPress={this._onPress}
                    style={styles.content}
                >
                    <FastImage
                        style={styles.image}
                        url={this.coverUrl}
                    />
                    <View style={styles.modal}>
                        <View style={styles.itemStyle}>
                            <Image
                                source={play_icon}
                                style={styles.itemIconSmall}
                            />
                            <Text style={styles.text}>
                                {this.viewTotal}
                            </Text>
                        </View>
                    </View>
                </Press>
            </View>
        )
    }
}

export default VideoRow;

const styles = StyleSheet.create({
    container:{
        height:150,
        width: `33.3%`,
        paddingHorizontal: 5
    },
    content:{
        flex:1,
        borderRadius:4,
        overflow:`hidden`,
        backgroundColor:`#000`
    },
    image:{
        flex:1,
        alignItems:`center`,
        justifyContent:`center`
    },
    play:{
        width:40,
        height:40
    },
    modal:{
        bottom:0,
        left:0,
        right:0,
        height:24,
        alignItems:`center`,
        flexDirection:`row`,
        position:`absolute`,
        paddingHorizontal:4,
        justifyContent:`space-between`,
        backgroundColor:`rgba(0,0,0,.2)`
    },
    itemStyle:{
        alignItems:`center`,
        flexDirection:`row`
    },
    itemIcon:{
        width:12,
        height:12
    },
    itemIconSmall:{
        width:13,
        height:13
    },
    text:{
        fontSize:12,
        color:`#fff`,
        paddingLeft:3,
        marginTop:-2
    }
}) as any;